<script setup>
import { ref } from "vue";

// 导入element-plus中的icon组件

import {

    Edit
} from "@element-plus/icons-vue"

import {


    getUsersInPageService,
    openOrBanUserService,

} from '../../api/operation'

import { ElMessage } from 'element-plus';



// 用户分页查询数据模型
const users = ref([
    {
        userId: null,
        userName: '',
        email: '',
        phoneNumber: '',
        createDate: null,
        updateDate: null,
        status: null
    }
]);

const total = ref(0);
const pageSize = ref(10);
const pageNo = ref(1);

// 用户查询函数


const getUsersInpage = async () => {

    let params = new URLSearchParams();
    params.append('pageSize', pageSize.value);
    params.append('pageNo', pageNo.value);

    const result = await getUsersInPageService();
    if (result.code === 200) {
        users.value = result.data.list;
        total.value = result.data.total;
    } else {
        ElMessage.error(result.message);
    }
};

// 打开或禁用用户函数
const openOrBanUser = async (userId) => {

    const result = await openOrBanUserService(userId);

    if (result.code === 200) {
        ElMessage.success(result.message);
        getUsersInpage();
    } else {
        ElMessage.error(result.message);
    }

}



import { useTokenStore } from '@/src-manager/stores/token';


const tokenStore = useTokenStore();

if (tokenStore.token) {
    getUsersInpage();
}




const onUserPageSizeChange = (size) => {
    pageSize.value = size;
    getUsersInpage();

}


const onUserPageNoChange = (num) => {
    pageNo.value = num;
    getUsersInpage();
}






































</script>

<template>
    <el-card>

        <template>
            <div class="header">
                <span>用户管理</span>
            </div>
        </template>


        <el-table :data="users" style="width: 100%">


            <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
            <el-table-column prop="userName" label="用户名" width="120"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="120"></el-table-column>

            <el-table-column prop="phoneNumber" label="手机号" width="120"></el-table-column>
            <el-table-column prop="createDate" label="创建时间" width="120"></el-table-column>
            <el-table-column prop="updateDate" label="更新时间" width="120"></el-table-column>

            <el-table-column prop="status" label="状态" width="120">
                <template #default="{ row }">
                    <el-tag type="success" v-if="row.status === 1">正常</el-tag>
                    <el-tag type="warning" v-else-if="row.status === 0">禁用</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="开启/禁用" width="120">
                <template #default="{ row }">
                    <el-button circle plain type="primary" @click="openOrBanUser(row.userId)">
                        {{ row.status === 1 ? '禁用' : '开启' }}
                    </el-button>
                </template>
            </el-table-column>


        </el-table>


        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total"
            @size-change="onUserPageSizeChange" @current-change="onUserPageNoChange"
            style="margin-top: 20px; justify-content: flex-end"></el-pagination>
    </el-card>




</template>

<style>
/* 可以在这里添加更多的样式 */
</style>